/*
 * @Author: puhuaping
 * @Date: 2020-04-13 16:56:23
 */
<style lang="less" scoped>
.merchant-list {
  .btnBox {
    text-align: right;
  }
  .ivu-btn-small {
    padding: 1px 7px;
  }
  .ivu-btn {
    margin: 0 3px;
  }
}
.model-wrap .ivu-form-item {
  margin-bottom: 10px;
}
.flex-table {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}
</style>
<template>
  <div class="merchant-list">
    <Card :bordered="true">
      <Form :label-width="60" inline style="margin-bottom:10px">
        <FormItem label="订单ID">
          <Input
            type="text"
            clearable
            v-model="formSearch.orderId"
            style="width: 180px"
            placeholder="请输入订单ID"
          />
        </FormItem>
        <FormItem label="服务名">
          <Input
            type="text"
            clearable
            v-model="formSearch.serviceName"
            style="width: 180px"
            placeholder="请输入服务名称"
          />
        </FormItem>
        <FormItem label="预约用户">
          <Input
            type="text"
            clearable
            v-model="formSearch.userName"
            style="width: 180px"
            placeholder="请输入用户名"
          />
        </FormItem>
        <FormItem label="联系方式">
          <Input
            type="text"
            clearable
            v-model="formSearch.userMobile"
            style="width: 180px"
            placeholder="请输入联系方式"
          />
        </FormItem>
        <FormItem label="支付方式">
          <Select clearable v-model="formSearch.paymentType" style="width:180px">
            <Option value>全部</Option>
            <Option value="WAIT_AUDIT">爱豆支付</Option>
            <Option value="AUDIT_PASS">微信支付</Option>
          </Select>
        </FormItem>
        <FormItem label="订单状态">
          <Select clearable v-model="formSearch.state" style="width:180px">
            <Option value>全部</Option>
            <Option value="SERVICE_INIT">待支付</Option>
            <Option value="SERVICE_PAID">待使用</Option>
            <Option value="SERVICE_FINISHED">已使用</Option>
            <Option value="SERVICE_OVERDUE">已过期</Option>
            <Option value="SERVICE_CANCELED">已取消</Option>
          </Select>
        </FormItem>
        <Button type="primary" @click="handleSearch()">查询</Button>
        <Button type="success" @click="lookALL()">查看全部</Button>
      </Form>
      <!-- 表格 -->
      <tables
        ref="tables"
        :columns="columns"
        search-place="top"
        :searchBtn="false"
        v-model="tableData"
        :page="page"
        :handleChange="handleChange"
      />
    </Card>
    <Modal :mask-closable='false' v-model="showModel" title="预约订单-取消" width="300" @on-visible-change="changeModel">
      <Form
        ref="formSubmitRef"
        :model="formSubmitData"
        :rules="formSubmitRule"
        class="model-wrap"
        label-position="left"
      >
        <FormItem label prop='remark'>
            <Input type="textarea" placeholder="请输入拒绝原因" :rows="4" v-model="formSubmitData.remark" />
          </FormItem>
      </Form>
      <div slot="footer">
        <Button type="default" @click="showModel=false">取消</Button>
        <Button type="primary" @click="sureModel">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import Tables from "@/components/tables/tables.vue";
import { requestData, getData } from "@/api/data";
import { setToken, getToken } from "@/libs/util";
import { isNumber } from "@/tool/validator";
import config from "@/config";
const baseUrl =
  process.env.NODE_ENV === "development"
    ? config.baseUrl.dev
    : config.baseUrl.pro;
export default {
  name: "authentication",
  components: {
    Tables
  },
  data() {
    return {
      danhao: 1,
      showModel: false,
      page: {},
      tableData: [],
      curRowData: null,
      formSubmitRule: {
        remark: [
          {
            required: true,
            message: "请输入原因",
            trigger: "blur"
          }
        ]
      },
      formSubmitData: {
        remark: ""
      },
      formSearch: {
        orderId: "",
        paymentType: "",
        state: "",
        serviceName: "",
        userMobile: "",
        userName: ""
      },
      columns: [
        {
          title: "订单id",
          key: "id",
          minWidth: 100,
          align: "center"
        },
        {
          title: "服务名称",
          align: "center",
          key: "itemName",
          minWidth: 140
        },
        {
          title: "价格",
          align: "center",
          key: "itemPrice",
          minWidth: 80
        },
        {
          title: "支付方式",
          align: "center",
          key: "idouBalance",
          minWidth: 100,
          render: (h, params) => {
            return h(
              "span",
              params.row.paymentType == "WECHAT"
                ? "微信支付"
                : "爱豆支付"
            );
          }
        },
        {
          title: "预约用户",
          align: "center",
          key: "userName",
          minWidth: 100
        },
        {
          title: "联系方式",
          align: "center",
          key: "userMobile",
          minWidth: 100,
        },
        {
          title: "预约门店",
          align: "center",
          key: "siteName",
          minWidth: 100,
        },
        {
          title: "预约时间",
          align: "center",
          key: "subscribeTime",
          minWidth: 100
        },
        {
          title: "状态",
          align: "center",
          key: "state",
          minWidth: 100,
          render: (h, params) => {
            let text = {
              SERVICE_INIT: "待支付",
              SERVICE_CANCELED: "已取消",
              SERVICE_FINISHED: "已使用",
              SERVICE_PAID: "待使用",
              SERVICE_OVERDUE: "已过期"
            }[params.row.state];
            return h("span", text);
          }
        },
        {
          title: " ",
          align: "center",
          key: ""
        },
        {
          title: "操作",
          align: "center",
          width: 180,
          fixed: "right",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  attrs: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.$router.push({
                        name: "detailReservation",
                        query: { id: params.row.orderId }
                      });
                    }
                  }
                },
                "查看详情"
              ),
              h(
                "Button",
                {
                  attrs: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    display:
                      params.row.state == "SERVICE_INIT" ||
                      params.row.state == "SERVICE_PAID"
                        ? "inline-block"
                        : "none"
                  },
                  on: {
                    click: () => {
                      this.curRowData = params.row;
                      this.showModel = true;
                    }
                  }
                },
                "取消订单"
              )
            ]);
          }
        }
      ]
    };
  },
  methods: {
    //model确定
    sureModel() {
      this.$refs.formSubmitRef.validate(valid => {
        if (valid) {
          const curRowData = this.curRowData;
          let dataObj = {
            id: curRowData.id,
            remark: this.formSubmitData.remark
          };
          requestData("/admin/service/order/cancel", "post", dataObj).then(
            res => {
              if (res.data.code == 0) {
                this.$Message.success("操作成功");
                this.showModel = false;
                this.getListData();
              } else {
                this.$Message.error(res.data.msg);
              }
              this.showModel = false;
            }
          );
        }
      });
    },
    //模态框改变
    changeModel(e) {
      if (!e) {
        this.curRowData = null;
      }
    },
    lookALL() {
      let formSearch = this.formSearch;
      for (let i in formSearch) {
        formSearch[i] = "";
      }
      this.formSearch = formSearch;
      this.indexPage = 1;
      this.getListData();
    },
    handleSearch() {
      this.indexPage = 1;
      this.getListData();
    },
    //获取分页
    handleChange(e) {
      this.indexPage = e;
      this.getListData();
    },
    getListData() {
      const dataObj = Object.assign(
        {
          page: this.indexPage,
          max: 10
        },
        this.formSearch
      );
      requestData("/admin/service/order", "get", dataObj).then(res => {
        if (res.data.code == 0) {
          const { pageNumber, totalPage, totalRow } = res.data.page;
          this.page = {
            pageNumber: pageNumber,
            totalPage,
            totalRow: totalRow
          };
          this.tableData = res.data.data || [];
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    }
  },
  mounted() {
    this.getListData();
  }
};
</script>
